<template>
	<view class="layout">
		<uni-header :title="'我的活动报告'"></uni-header>
		<view class="content">
			<uni-card v-for="item in dataList" :title="item.activity_name"
				:extra="item.is_participation=='0'?'未参与':'已参与'">
				<text class="uni-body">
					<view class="text">时间：{{item.begin_time}}</view>
					<view class="text">地点：{{item.activity_add}}</view>
				</text>
				<view class="iconfont icon-weikaishi icon" v-if="item.state == 0"></view>
				<view class="iconfont icon-jinhangzhong icon" v-if="item.state == 1"></view>
				<view class="iconfont icon-yiwancheng icon" v-if="item.state == 2"></view>
				<view slot="actions" class="card-actions">
					<view class="card-actions-item" v-if="item.state == 2">
						<uni-icons type="wallet-filled" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text" @click="reportClick(item)">活动报告</text>
					</view>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	import {
		getMyReport
	} from "@/api/home"
	export default {
		data() {
			return {
				dataList: []
			}
		},
		created() {
			getMyReport({
				deviceId: this.$store.state.user.deviceId
			}).then(res => {
				this.dataList = res.list
			})
		},
		methods: {
			handleClick(data) {
				this.$tab.redirectTo(`/pages/activity/index?id=` + data.id)
			},
			reportClick(item) {
				let type = ""
				if (item.type === 2) {
					type = "emulate"
				} else if (item.type === 1) {
					type = "class"
				}
				this.$tab.navigateTo(`/pages/activity/report?id=` + item.id + '&type=' + type)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f6f7;

		.content {
			.uni-card {
				position: relative;

				.iconfont {
					position: absolute;
					right: 5vw;
					bottom: 11vh;
					font-size: 50px;
					color: #e4e1e1;
				}
			}

			.card-actions {
				display: flex;
				align-items: center;
				padding-bottom: 15px;
				border-top: 1px solid #eee;
				padding-top: 15px;

				.card-actions-item {
					display: flex;
					align-items: center;
					margin-right: 10px;
				}
			}
		}
	}
</style>
